<template>
    <div id="index">
        <el-container>
            <!-- 头部 -->
            <el-header height="100px" style="line-height:100px">
                <img src="@/assets/logo.png">
                <span style="font-size:17px;font-weight:500">随堂问卷管理系统</span>
                <span class="usersInfo">
                    <span style="font-size:12px">[{{username}}]</span>
                    <el-button type="text" @click="loginout" style="color:rgb(0,0,255);text-decoration:underline">注销</el-button>
                </span>
            </el-header>
            <el-container class="mainBody">
                <el-aside width="200px">
                    <!-- 左侧菜单栏 -->
                        <el-menu :router="true">
                            <el-menu-item v-for="menus in menusList" :key="menus.id" :index="menus.url">
                                <i :class="menus.icon"></i>
                                <span slot="title">{{menus.text}}</span>
                            </el-menu-item>
                            <!-- <template v-for="menus in menusList">
                            <el-menu-item :key="menus.id" :index="menus.url" v-show="menus.children.length==0">
                                <i :class="menus.icon"></i>
                                <span slot="title">{{menus.text}}</span>
                            </el-menu-item>
                            
                            <el-submenu :index="menus.url" v-show="menus.children.length>0" :key="menus.sort">
                                <template slot="title">
                                    <i :class="menus.icon"></i>
                                    <span>{{menus.text}}</span>
                                </template> 
                                <el-menu-item :index="menu.url" v-for="menu in menus.children" :key="menu.id"> 
                                    <i :class="menu.icon"></i>
                                    <span>{{menu.text}}</span>
                                </el-menu-item>
                            </el-submenu> 
                            </template> -->
                        </el-menu>
                </el-aside>
                <!-- 主体部分 -->
                <el-main style="padding:30px;">
                    <!-- 组件文件展示视图 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
  data() {
    return {
      menusList: [],
      username:[]
    };
  },
  methods: {
    //   展示菜单方法
    getMenusList() {
      
      this.treeLoading = true;
      this.$http.get("/menus/list?status=1").then(result => {
          if (result.data.error > 0 && result.data.error == 4) {
            this.$router.push("/users/login");
            return;
          }
          this.treeLoading = false;
          this.menusList = this.$tree(result.data.data);
        })
        .catch(error => {
          console.log(error);
        });
     },
    //  注销
     loginout(){
         this.$http.get('/users/loginout').then((result)=>{
                this.$router.push({name:'login'})
         }).catch((error)=>{
             console.log(error)
         })
     },
    //  获取用户信息
    userInfo(){
        this.$http.get('/users/info').then(result=>{
            this.username=result.data.data.username
        }).catch((error)=>{
            console.log(error)
        })
    }

  },
  created() {
    //   执行菜单列表请求
    this.getMenusList();
    this.userInfo()    
    this.$root.$on('getMenusList',()=>{
        this.getMenusList()
    })
  }
};
</script>
<style>
.mainBody{
    position:absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0
}
.el-main{
    background: #f5f5f5
}
.usersInfo{
    padding:0 4px;
    color: #409eff;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
}
</style>


